<template>
  <div id="app">
    <keep-alive :include="['homeIndex']">
      <router-view v-transition class="router-view"/>
    </keep-alive>
    <transition name="fade">
      <div v-if="tips.show" class="tips">
        {{ tips.message }}
      </div>
      <div v-if="showloading" class="tips">
        正在玩命加载...
      </div>
    </transition>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'app',
  computed: {
    ...mapState(
      [
        'tips', 'showloading'
      ]
    )
  }
}
</script>

<style lang="scss">
a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
}

span,
a,
button,
p,
div {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}


// router animation support class
.router-view {
  min-height: 100vh;
}

// aliicon css
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 240px;
  z-index: 999;
  border-radius: .4rem;
  background-color: rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
